﻿/*
* name:mobile-style.css
* version:v3.0.0
* update:剥离UI
* data:2015-06-29
*/
/* 
* 依赖:
* rem响应方案
* 按需加载
*/
html,body{height:100%;}
html{font-size:15.625vw; -webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
body{-webkit-text-size-adjust:none;text-size-adjust:none;
overflow-x:hidden;max-width:480px;margin-left:auto;margin-right:auto;
user-select:none;-webkit-user-select:none;position:relative; font-family:'Microsoft Yahei',arial,'hiragino sans gb',stheiti,'wenquanyi micro hei', \5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif; overflow-x:hidden; line-height:1.5;}
body, h1, h2, h3, h4, p, ul, ol, dd, dl, form { margin:0;}
hr { margin-top:20px; margin-bottom:20px; border:0; border-top:1px solid #eee;}
img { max-width:100%; height:auto; vertical-align:top; -ms-interpolation-mode:bicubic; border:0 ;}
ul { padding-left:0; list-style-type:none;}
i, em { font-style:normal;}
article, aside, dialog, footer, header, section, nav, figure, menu, audio, canvas, progress, video { display:block;}
input, select{outline:0;}
fieldset { min-width:0; margin:0; padding:0; border:0;}
legend { font-size:1.3em; line-height:2.5; display:block; width:100%; margin-bottom:20px; 
  padding:0; color:#333; border:0; border-bottom:1px solid #e5e5e5;}
table { border-spacing:0; border-collapse:collapse;background-color:transparent;}
td, th { padding:0;}
a{ text-decoration:none;}
/* flex栅格 */
.flex-col {overflow:hidden; display:-webkit-box; display:-webkit-flex; display:-ms-box; 
	display:-ms-flexbox; display:flex; flex-direction:column;
	-webkit-box-orient:vertical; -webkit-flex-direction:column; 
	-ms-flex-direction:column; }
.flex-row {overflow:hidden; display:-webkit-box; display:-webkit-flex; display:-ms-box; 
	display:-ms-flexbox; display:flex; -webkit-box-orient:horizontal; 
	-ms-flex-direction:row;}
.flex-1 { -webkit-box-flex:1; -webkit-flex:1; -ms-flex:1; flex:1;}
.flex-2 { -webkit-box-flex:2; -webkit-flex:2; -ms-flex:2; flex:2;}
.flex-3 { -webkit-box-flex:3; -webkit-flex:3; -ms-flex:3; flex:3;}
.flex-4 { -webkit-box-flex:4; -webkit-flex:4; -ms-flex:4; flex:4;}
.flex-5 { -webkit-box-flex:5; -webkit-flex:5; -ms-flex:5; flex:5;}
.align-stretch { -webkit-box-align:stretch; -webkit-align-items:stretch; 
	-ms-align-items:stretch; -ms-flex-align:stretch; align-items:stretch;}
.align-center { -webkit-box-align:center; -webkit-align-items:center; 
	-ms-align-items:center; -ms-flex-align:center; align-items:center;}
.justify-center { -webkit-box-pack:center; -ms-box-pack:center; 
	-webkit-justify-content:center; -ms-flex-pack:center; justify-content:center;}
.flex-wrap { -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap;}
.scroll_cont {overflow:auto; box-sizing:border-box; width:100%; height:100%;}
@-ms-viewport { width:device-width;}

/*工具*/
.fix { *zoom:1; *clear:both;}
.fix:before, .fix:after { display:table; clear:both; content:'';}
.oh { overflow:hidden; *zoom:1;}
.l { float:left;}.r { float:right;}
.dib { display:inline-block; *display:inline; *zoom:1;}
.pr { position:relative;}.pa { position:absolute;}
.tc { text-align:center;}.tr { text-align:right;}
.el { overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.hide { display:none;}
.hidetext { font:0/0 a; letter-spacing:-9px;}
.arr { display:inline-block; overflow:hidden; width:0; height:0;}
.opc0 { opacity:0 ; filter:alpha(opacity=0);}

/* 设置 */
body{font-size:.24rem; background:#050740;}
a{color:inherit; display:block;}

/* 设备区分 */
body:after {display:block;height:0;line-height:0;overflow:hidden;visibility:hidden;
	content:'Mobile';}
/* 手机竖屏 start! */
.body, html, .flex-col{ width:100%; height:100%; overflow:hidden;}
.ui-icon { position:absolute; z-index:300; display:block; background-image:url(../img/icons.png); -webkit-background-size:300% 100% ;
background-size:300% 100% ;}
.icon-up { bottom:.2rem; left:50%; width:.6rem; height:1.04rem; margin-left:-.3rem; background:url(../img/down.png) no-repeat; background-size:100% 100%;}
.running{ -webkit-animation:animateUp 1.5s infinite; animation:animateUp 1.5s infinite;}
@-webkit-keyframes animateUp { 0% { -webkit-transform:translate3d(0,42px,0); opacity:0;}
    60% { -webkit-transform:translate3d(0,12px,0); opacity:1;}
    100% { -webkit-transform:translate3d(0,0px,0); opacity:0;}}
    keyframes animateUp { 0% { -webkit-transform:translate3d(0,42px,0); opacity:0;}
    60% { -webkit-transform:translate3d(0,12px,0); opacity:1;}
    100% { -webkit-transform:translate3d(0,0px,0); opacity:0;}}
#loader {width:100%;height:100%;background:#02073e; color:#ff901a; position:absolute;left:0;top:0;z-index:98}
.loader_bar {position:absolute;top:45%; z-index:1; width:100%; height:auto; text-align:center; font-size:0.24rem; }
#loading-img{ position:absolute; top:40%; z-index:2; width:1.28rem; height:0.38rem; left:50%; margin-left:-0.64rem;}

.spinner { margin:10px auto; width:50px; height:40px; text-align:center; font-size:10px; }
.spinner > div { background-color:#ff901a; height:100%; width:6px; display:inline-block; -webkit-animation:sk-stretchdelay 1.2s infinite ease-in-out; animation:sk-stretchdelay 1.2s infinite ease-in-out; }
.spinner .rect2 { -webkit-animation-delay:-1.1s; animation-delay:-1.1s; }
.spinner .rect3 { -webkit-animation-delay:-1.0s; animation-delay:-1.0s; }
.spinner .rect4 { -webkit-animation-delay:-0.9s; animation-delay:-0.9s; }
.spinner .rect5 { -webkit-animation-delay:-0.8s; animation-delay:-0.8s; }
@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform:scaleY(0.4)}
  20% { -webkit-transform:scaleY(1.0)}
}
@keyframes sk-stretchdelay {
  0%, 40%, 100% { transform:scaleY(0.4); -webkit-transform:scaleY(0.4);}
  20% { transform:scaleY(1.0); -webkit-transform:scaleY(1.0);}
}

.swiper-container{ display:none;}
.swiper-button-next{ -webkit-transform:rotate(90deg);transform:rotate(90deg);}
.swiper-container { width:100%; height:100%;}
.swiper-slide { text-align:center;/*  display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; -webkit-align-items:top; align-items:top; */ background:url(../img/mainbg.jpg) bottom no-repeat; background-size:100% 100%;}
.swiper-slide>img{ height:100%;}
.pos{ position:absolute; z-index:10;}

/* music */
.icon-music { display:block; width:48px; height:48px; background-position:48px 0; position:static;}
.ui-music { font-size:24px; position:fixed; z-index:100; ldisplay:block; text-decoration:none; color:#fff; top:.1rem; right:.1rem;}
.ui-music.playing .icon-music { -webkit-animation:reverseRotataZ 1.2s linear infinite;}
@-webkit-keyframes reverseRotataZ { 0% { -webkit-transform:rotateZ(0deg);}
    100% { -webkit-transform:rotateZ(-360deg);}}
/* music end*/

/* ↓↓ base animate ↓↓ */
/*360度顺时针旋转*/
@-webkit-keyframes circle360 {
  from { -webkit-transform:rotateZ(0); transform:rotateZ(0);}
  to { -webkit-transform:rotateZ(360deg); transform:rotateZ(360deg);}
}
@keyframes circle360 {
  from { -webkit-transform:rotateZ(0); transform:rotateZ(0);}
  to { -webkit-transform:rotateZ(360deg); transform:rotateZ(360deg);}
}
.circle360 { 
  -webkit-animation-name:circle360; 
  animation-name:circle360; 
  -webkit-animation-timing-function:steps(360,end); 
  animation-timing-function:steps(360,end); 
  -webkit-animation-play-state:paused; 
  animation-play-state:paused;
  -webkit-animation-duration:6s; 
  animation-duration:6s;
  -webkit-animation-delay:0.8s;
  animation-delay:0.8s;
  -webkit-animation-iteration-count:infinite;
  animation-iteration-count:infinite;
}

/*360度逆时针旋转*/
@-webkit-keyframes circle360_anti {
  from { -webkit-transform:rotateZ(360deg); transform:rotateZ(360deg);}
  to { -webkit-transform:rotateZ(0); transform:rotateZ(0);}
}
@keyframes circle360_anti {
  from { -webkit-transform:rotateZ(360deg); transform:rotateZ(360deg);}
  to { -webkit-transform:rotateZ(0); transform:rotateZ(0);}
}
.circle360_anti { 
  -webkit-animation-name:circle360_anti; 
  animation-name:circle360_anti; 
  -webkit-animation-timing-function:steps(360,end); 
  animation-timing-function:steps(360,end); 
  -webkit-animation-play-state:paused; 
  animation-play-state:paused;
  -webkit-animation-duration:6s; 
  animation-duration:6s;
  -webkit-animation-delay:0.8s;
  animation-delay:0.8s;
  -webkit-animation-iteration-count:infinite;
  animation-iteration-count:infinite;
}

/*闪烁*/
@-webkit-keyframes twinkle {
  from { opacity:0;}
  100% { opacity:1;}
}
@keyframes twinkle {
  from { opacity:0;}
  100% { opacity:1;}
}
.twinkle {
  -webkit-animation-name:twinkle;
  animation-name:twinkle;
  -webkit-animation-play-state:paused; 
  animation-play-state:paused;
  -webkit-animation-duration:3s;
  animation-duration:3s;
  -webkit-animation-delay:2s;
  animation-delay:2s;
  -webkit-animation-iteration-count:infinite;
  animation-iteration-count:infinite;
  -webkit-animation-direction:alternate;
  animation-direction:alternate;
  -webkit-animation-fill-mode:both;
  animation-fill-mode:both;
}

/*扫描*/
@-webkit-keyframes light_scan {
  from { top:8%;}
  to { top:88%;}
}
@keyframes light_scan {
  from { top:8%;}
  to { top:88%;}
}
.light_scan {
  -webkit-animation-name:light_scan;
  animation-name:light_scan;
  -webkit-animation-play-state:paused; 
  animation-play-state:paused;
  -webkit-animation-duration:1.5s;
  animation-duration:1.5s;
  -webkit-animation-delay:2s;
  animation-delay:2s;
  -webkit-animation-iteration-count:infinite;
  animation-iteration-count:infinite;
  -webkit-animation-direction:alternate;
  animation-direction:alternate;
  -webkit-animation-fill-mode:both;
  animation-fill-mode:both;
}

/*启动*/
.swiper-slide-active .circle360,.swiper-slide-active .circle360_anti,.swiper-slide-active .twinkle,.swiper-slide-active .light_scan {
  -webkit-animation-play-state:running; 
  animation-play-state:running;
}

/* ↑↑ base animate ↑↑ */

/*start*/
.com_head,.com_head .title { height:1.65rem;}
.com_head { width:100%; margin-top:.7rem; position:relative;}
.com_head > span { display:block; width:1.42rem; height:1.06rem; background:url(../img/headbg.png) no-repeat; background-size:200% 100%; position:absolute; top:50%; margin-top:-0.53rem;}
.com_head > span.left { background-position:0 0; left:0;}
.com_head > span.right { background-position:100% 0; right:0;}
.com_head .title { font-size:.56rem; line-height:1.7rem; color:#fff; font-weight:normal;}

.p6 .com_head .title { line-height:1.4; }

/*p1*/
#canvas { width:100%; height:100%; position:relative; }
.p1 { background-image:url(../img/indexbg.jpg); }

.p1Box .logo,.p1Box .logo img,.p1Box .circle01,.p1Box .circle02 { width:4.9rem; height:4.9rem; position:absolute; top:0; left:50%; margin-left:-2.45rem;}

.p1Box { width:100%; height:4.9rem; right:0; top:1.4rem; position:absolute;}
.p1Box > div { position:absolute; right:0; top:0;}
.p1Box .ib { width:100%; height:100%; position:absolute; left:0; top:0; background-repeat:no-repeat; background-size:100% 100%;}
.p1Box .circle01 { z-index:2;}
.p1Box .circle01 .ib { background-image:url(../img/p1_circle1.png);}
.p1Box .circle02 .ib { background-image:url(../img/p1_circle2.png); z-index:1;}
.p1Box .logo { z-index:3; }

.p1Box .light01,.p1Box .light02 { margin:0; left:auto; right:0; z-index:4;}

.p1Btn,.p1Btn img { width:4.03rem; height:.95rem; }
.p1Btn { position:absolute; left:50%; margin-left:-2.015rem; bottom:1.4rem; }

/*p2*/
.p2 .img,.p2 .img img { width:5.8rem; height:1.6rem; }
.p2 .com_body { padding-top:.5rem; }
.p2 .img { margin:0 auto 0.5rem; }

/*p3*/
.p3 .text { font-size:.32rem; color:#ff9119; padding:.3rem 0; }
.p3 .box { width:5.1rem; height:5.67rem; position:relative; margin:0 auto; background:url(../img/p3_img04.png) 0 0 / 100% 100% no-repeat;}
.p3 .img,.p3 .img img { width:2.02rem; height:2.62rem;}
.p3 .img img { position:relative; z-index:2; }
.p3 .img .circle { width:2.02rem; height:2.02rem; position:absolute; z-index:1; left:0rem; top:0; background:url(../img/p3_circle02.png) 0 0 / 100% 100% no-repeat;}
.p3 .img { position:absolute;}
.p3 .img01 { right:-0.25rem; top:-0.25rem; }
.p3 .img01 .circle { background-image:url(../img/p3_circle01.png); }
.p3 .img02 { left:-0.25rem; top:1.35rem; }
.p3 .img03 { right:0; bottom:0; }

/*p4*/
.p4 .img,.p4 .img img { width:5.5rem; height:1.2rem; }
.p4 .img01,.p4 .img01 img { width:5.5rem; height:1rem; }
.p4 .com_body { padding-top:.5rem; }
.p4 .img { margin:0 auto 0.4rem; }

/*p5*/
.p5 .img,.p5 .img img { width:5.75rem; height:1.09rem; }
.p5 .img01,.p5 .img01 img { height:3.33rem; }
.p5 .img01 { margin-bottom:.5rem; }
.p5 .com_body { padding-top:.5rem; }
.p5 .img { margin:0 auto 0.2rem; }

/*p6*/
.p6 .box { width:5.9rem; height:6.36rem; position:relative; margin:.4rem auto 0;}
.p6 .img01,.p6 .img01 img,.p6 .img03,.p6 .img03 img { width:2.86rem;}
.p6 .img01,.p6 .img01 img { height:2.51rem;}
.p6 .img03,.p6 .img03 img { height:3.39rem;}
.p6 .img02,.p6 .img02 img,.p6 .img04,.p6 .img04 img { width:2.76rem;}
.p6 .img02,.p6 .img02 img { height:3.09rem;}
.p6 .img04,.p6 .img04 img { height:3.02rem;}

.p6 .img img { position:relative; z-index:2; }
.p6 .img .circle { width:2.14rem; height:2.14rem; position:absolute; z-index:1; left:50%; margin-left:-1.07rem; background:url(../img/p6_circle01.png) 0 0 / 100% 100% no-repeat;}
.p6 .img01 .circle { bottom:0; }
.p6 .img02 .circle,.p6 .img04 .circle { bottom:0; width:2.23rem; height:2.23rem; margin-left:-1.115rem;}
.p6 .img02 .circle { bottom:0; }
.p6 .img04 .circle { top:0; }
.p6 .img03 .circle { bottom:-.02rem; width:2.34rem; height:2.34rem; margin-left:-1.17rem;}

.p6 .img { position:absolute;}
.p6 .img01 { left:0; top:0; }
.p6 .img01 .circle { background-image:url(../img/p6_circle01.png); }
.p6 .img02 { right:0; top:0; }
.p6 .img03 { left:0; bottom:.13rem; }
.p6 .img04 { right:0; bottom:0; }

/*p7*/
.p7 { background-image:url(../img/p7_bg.jpg); }
.p7 .com_body { min-height:7.52rem; position:relative; }
.p7 .com_body .light { width:100%; height:6.43rem; position:absolute; left:0; top:.8rem; background:url(../img/p7_light.png) 0 0 / 100% 100% no-repeat;}
.p7 .com_body .title { font-size:.35rem; color:#ff9100; padding:.15rem 0;}
.p7 .com_body .text { font-size:.22rem; color:#ffffff; }
.p7 .com_body .title,.p7 .com_body .text { position:relative; z-index:2; }
.p7 .com_body .box { position:relative; width:5.8rem; height:5.4rem; margin:0 auto; z-index:3;}
.p7 .com_body .img01,.p7 .com_body .img01 img { width:5.78rem; height:4.12rem; }
.p7 .com_body .img02,.p7 .com_body .img02 img,.p7 .com_body .img03,.p7 .com_body .img03 img { width:2.45rem; height:3.15rem; }
.p7 .com_body .img02,.p7 .com_body .img03 { position:absolute; top:2.5rem; z-index:2; opacity:0; -webkit-transition:all 0.5s ease; transition:all 0.5s ease; transition-delay:3.8s; -webkit-transition-delay:3.8s;}
.p7 .com_body .img02 { left:1rem;}
.p7 .com_body .img03 { right:1rem; }

.p7.swiper-slide-active .com_body .img02,.p7.swiper-slide-active .com_body .img03 { top:3.2rem; opacity:1;}
.p7.swiper-slide-active .com_body .img02 { left:0; }
.p7.swiper-slide-active .com_body .img03 { right:0; }
.p7 .img .circle { width:2.03rem; height:2.03rem; position:absolute; z-index:1; background:url(../img/p6_circle01.png) 0 0 / 100% 100% no-repeat;}
.p7 .img img { position:relative; z-index:2; }
.p7 .img02 .circle { left:0; bottom:.17rem;}
.p7 .img03 .circle { right:0; bottom:.22rem;}

/*p8*/
.p8 { background-image:url(../img/p7_bg.jpg); }
.p8 .com_body .title { font-size:.34rem; color:#ff9100; padding:.2rem 0 .8rem; }
.p8 .img,.p8 .img img { width:3.95rem; height:3.95rem; }
.p8 .img { margin:0 auto .4rem; position:relative;}
.p8 .img .light { width:100%; height:.22rem; background:url(../img/p8_light.png) 0 0 / 100% 100% no-repeat; position:absolute; left:0; top:8%; }
.p8 .text { color:#fff; font-size:.22rem;}

/*p9*/
.p9 .com_body .title { font-size:.34rem; color:#ff9100; padding:0 0 .2rem;}
.p9 .com_body .text { font-size:.22rem; color:#fff; } 
.p9 .box { width:100%; height:6.74rem; position:relative; }
.p9 .stars,.p9 .light,.p9 .light .box { width:100%; height:100%; position:absolute; left:0; top:0;}
.p9 .stars { background:url(../img/p9_stars.png) 0 0/100% 100% no-repeat; }
.p9 .light .box { background:url(../img/p9_light.png) 0 0/100% 100% no-repeat; } 
.p9 .img { position:absolute; z-index:10; }
.p9 .img01,.p9 .img01 img { width:4.5rem; height:3.4rem; }
.p9 .img01 { left:50%; margin-left:-2.25rem; top:1.6rem; }

.p9 .img02,.p9 .img02 img { width:2.48rem; height:.47rem; max-width:none;}
.p9 .img02 { left:1.6rem; top:2.8rem; overflow:hidden; width:0; -webkit-transition:all 3s ease; transition:all 3s ease; transition-delay:3.3s; -webkit-transition-delay:3.3s;}

.p9.swiper-slide-active .img02 { width:2.48rem; }

.p9 .img03,.p9 .img03 img { width:1.55rem; height:1.55rem;}
.p9 .img03 { left:4rem; top:3.15rem; }
.p9 .img03 img { position:relative; z-index:2; }
.p9 .img03 .circle { width:2.05rem; height:2.05rem; position:absolute; z-index:1; background:url(../img/p6_circle01.png) 0 0 / 100% 100% no-repeat; left:-.25rem; top:-.25rem;}

/*p10*/


/*p11*/


/*p12*/


/*p13*/


/*p14*/


/*p15*/


/*p16*/


/*
p17*/